<template>
	<view class="main-container">
		<HeaderBar title="研学之州" :titleColor="titleColor" :navBarBgc="headerBgc" :isFixed="true"></HeaderBar>
		<view class="newsList_content">
			<view class="influence_content">
				<view class="influence-tab-list">
					<view class="influence-tab-item" @click="changeTab(item)" v-for="item in tabsList" :key="item.code"
						:class="active==item.code?'isActive':''">
						{{item.name}}
					</view>
				</view>
				<scroll-view scroll-y v-if="newsDataList.length" :show-scrollbar="false" class="news-container"
					@scrolltolower="scrollGetMore">
					<view class="news-item-box" @click="gotoNewsDetail(item)" v-for="item in newsDataList" :key="item">
						<image class="item-left-image" :src="item.headImage" mode="aspectFill"></image>
						<view class="item-right-box">
							<view class="news-title-box flex-col">
								<text class="news-title">{{item.title}}</text>
								<text class="news-sub-title">{{item.subTitle}}</text>
							</view>
							<view class="news-detail">
								<text>查看更多</text>
								<wd-icon name="chevron-right" size="14px" color="#2B2B24"></wd-icon>
							</view>
						</view>
					</view>

					<view class="vlog-container">
						<wd-loadmore custom-class="loadmore" :state="loading"
							:loading-props="{color:'#26704e'}"></wd-loadmore>
					</view>
				</scroll-view>
				<view class="nodataStyle" v-else>
					<wd-status-tip image="content" tip="暂无内容" />
				</view>
				<wd-gap safe-area-bottom height="40"></wd-gap>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		getDataList
	} from '../../utils/commonMethods'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import HeaderBar from "@/components/HeaderBar/index.vue";
	import {
		commonWordList
	} from "@/api/system";
	const newsDataList = ref([])
	const loading = ref("");
	const headerBgc = ref("transparent");
	const titleColor = ref("#2D2D2D");
	const clickLoading = ref(false);
	const active = ref('')
	const tabsList = ref([])
	const tabsFirst = {
		code: '',
		name: '全部'
	}
	/**
	 * @description 获取下一页数据
	 * @author 杨燕娥
	 */
	const scrollGetMore = (e) => {
		if (loading.value == "loading") return
		if (query.value.query.total == newsDataList.length) return loading.value = "finished"
		loading.value = "loading"
		query.value.query.pageNo++
		getNewsList()
	};
	/**
	 * @description 获取文章列表
	 * @author 杨燕娥
	 */
	async function getNewsList() {
		query.value.userVlog.tagCode = active.value
		let res = await getDataList(query.value)
		if (!res) return
		newsDataList.value = [...newsDataList.value, ...res.result]
		query.value.query.total = res.total
	}
	const changeTab = (item) => {
		if (active.value == item.code) return
		active.value = item.code
		query.value.query.pageNo = 1
		newsDataList.value = []
		getNewsList()
	};
	//详情
	const gotoNewsDetail = (item) => {
		if (clickLoading.value) return
		clickLoading.value = true
		uni.navigateTo({
			url: "/fiveMajorSubPack/pages/hospitable/newsDetail?id=" + item.id + "&title=新闻资讯",
			complete() {
				clickLoading.value = false
			}
		})
	};
	const query = ref({
		userVlog: {
			type: 4,
			tagCode: '',
		},
		query: {
			pageNo: 1,
			pageSize: 20,
			total: 0
		}
	})
	onLoad(async (options) => {
		console.log(options)
		const res = await commonWordList({
			keys: "STUDY_ABROAD_STATE_TAG"
		})
		if(!res) return
		tabsList.value = res.result['STUDY_ABROAD_STATE_TAG']

		if (tabsList.value[0].name == '全部') tabsList.value[0].code = ''
		else tabsList.value = [tabsFirst, ...tabsList.value]
		active.value = options.code || tabsList.value[0].code
		query.value.query.pageNo = 1
		getNewsList()
	})
</script>

<style lang="scss" scoped>
	.nodataStyle {
		width: 100%;
		margin-top: 250rpx;
	}

	.influence_content {
		border-radius: 10rpx;
		box-sizing: border-box;
		width: 100%;
		position: flex;
		flex-direction: column;
		padding: 50rpx 0rpx;

		.influence-tab-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.influence-tab-item {
			font-size: 29rpx;
			padding: 0 27rpx;
			height: 55rpx;
			line-height: 55rpx;
			border-radius: 27rpx;
			color: #2B2B24;
		}

		.isActive {
			color: #FFF;
			background-color: #1B9C61;
			font-size: 33rpx;
			position: relative;
		}


	}

	.newsList_content {
		height: 100vh;
		box-sizing: border-box;
		width: 100%;
		position: flex;
		flex-direction: column;
		padding: 158rpx 28rpx 80rpx;
		overflow: hidden;
		background: linear-gradient(to bottom, #b4cab7 30px, #eeefe7 100px);

		.news-top-title {
			font-size: 41rpx;
			color: #2B2B24;
			font-weight: 1000;
			display: flex;
			align-items: center;

			image {
				width: 29rpx;
				height: 35rpx;
				margin-right: 15rpx;
			}
		}
	}

	.main-container {
		min-height: 100vh;
		background-color: #fff;

		:deep(.swiper-container) {
			margin-top: -100rpx;
			position: relative;
			--wot-swiper-radius: 0;
		}


		.news-container::-webkit-scrollbar {
			display: none;
			/* Chrome/Safari */
		}

		.news-container {
			width: 100%;
			height: 100%;
			overflow: scroll;
			-ms-overflow-style: none;
			/* IE/Edge */
			scrollbar-width: none;
			/* Firefox */
			margin-top: 41rpx;
			margin-bottom: 50rpx;

			.news-item-box {
				background-color: #fff;
				position: relative;
				border-radius: 10rpx;
				width: 100%;
				height: 208rpx;
				margin-right: 28rpx;
				display: flex;
				margin-bottom: 20rpx;

				.item-left-image {
					width: 208rpx;
					height: 208rpx;
					border-radius: 10rpx;
				}

				.item-right-box {
					width: calc(100% - 208rpx);
					padding: 20rpx;
					display: flex;
					flex-direction: column;
					color: #2B2B24;
					font-size: 29rpx;
					justify-content: space-between;
					overflow: hidden;

					.news-title-box {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;

						text {
							display: block;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.news-title {
						font-weight: bold;
					}

					.news-detail {
						color: #2B2B24;
						display: flex;
						align-items: center;
						text-align: right;

						text {
							width: 100%;
							font-size: 25rpx;
						}
					}

				}

			}

			.explore-item-container:last-child {
				margin-right: 28rpx;
			}

			.more-news {
				height: 100rpx;
				line-height: 100rpx;
				width: 100%;
				text-align: center;
			}
		}


		.vlog-container {
			padding: 0 28rpx;
		}
	}
</style>